
import G6 from "@antv/g6"




const Layouts = {

    Random: Symbol("random"),
    GForce: Symbol("gforce"),
    Force: Symbol("force"),
    Circular: Symbol("circular"),
    Radial: Symbol("radial"),
    MDS: Symbol("mds"),
    Fruchterman: Symbol("fruchterman"),
    Dagre: Symbol("dagre"),
    Concentric: Symbol("concentric"),
    Grid: Symbol("grid")
}

const GraphItems = {
    Vertex: Symbol("Vertex"),
    Edge: Symbol("Edge")
}

const G6DefaultSettings = {

    nodeStateSytles: {
        hover: {
            fill: 'lightsteelblue'
        },
        click: {
            stroke: '#000',
            lineWidth: 3
        }
    }

}




class Graph {

    constructor() {
        this.$G6 = null;

        this.$vertexes = [];
        this.$edges = [];

        this.$customEvents = [];

    }

    init(dom, options={}) {

        const  defaults = {
            width: window.innerWidth,
            height: window.innerHeight,
            zoom: 0.2

        }
        const settings = Object.assign({}, defaults, options);

        this.$G6 = new G6.Graph({
            container: dom,
            width: settings.width,
            height: settings.height,
            nodeStateStyles: {
                hover: {
                    fill: 'lightsteelblue',
                },
                click: {
                    stroke: "steelblue",
                    lineWidth: 3
                }
            },
            edgeStateStyles: {
                click: {
                    stroke: "steelblue"
                }
            },
            modes: {
                default: ['drag-canvas', 'zoom-canvas', 'drag-node']
            }
        })// G6

        this.regiesterDefaultEvents();

    }//init

    regiesterDefaultEvents() {

        this.$G6.on("node:mouseenter", (e)=>{
            this.$G6.setItemState(e.item, 'hover', true);
        });
        this.$G6.on("node:mouseleave", (e)=>{
            this.$G6.setItemState(e.item, 'hover', false);
        });

        this.$G6.on("node:click", (e)=>{
            this.$G6.findAllByState('node', 'click').forEach(each => {
                this.$G6.setItemState(each, 'click', false);
            })
            this.$G6.setItemState(e.item, 'click', true);
        });

        // this.$G6.on("edge:mouseenter", (e)={
        //     this.$G6.setItemState(e.item, 'hover', true)

        // });

    }//regiesterDefaultEvents

    on(event, handler) {
        this.$G6.on(event, (e) => { handler(e) });
    }

    updateLayout(layout, options={}) {
        let cfg = Object.assign({}, options)
        let typeEnumStr = layout.toString();
        let match = typeEnumStr.match(/(?<=Symbol\().+(?=\))/i);
        let layoutType = "random";
        if (match) layoutType = match[0];
        
        cfg = {
            type: layoutType
        }

        this.$G6.updateLayout(cfg)
    }

    zoomIn() {
        this.$G6.zoom(1.2);
    }

    zoomOut() {
        this.$G6.zoom(0.8);
    }

    fitView() {
        this.$G6.fitView();
    }

    data(data) {
        this.$G6.data(data);
        this.$vertexes = 'nodes' in data? data['nodes'] : []
        this.$edges = 'edges' in data? data['edges'] : []
    }

    addVertex (data, stack=true) {
        this.$vertexes.push(data);
        this.$G6.addItem("node", data, stack);
    }

    addEdge(data, stack = true) {
        this.$edges.push(data);
        this.$G6.addItem("edge", data, stack)
    }

    render() {
        this.$G6.render();
    }



}

const instance = new Graph();

export {
    instance as Graph,
    Layouts
}
